<template>
  <div class="myOrder">
    <div class="headerBox">
      <van-nav-bar
        title="退款记录"
        left-arrow
        @click-left="onClickLeft"
      ></van-nav-bar>
      <van-tabs v-model="activeName" animated sticky @change="getList(true)">
        <van-tab title="待退款" name="6"></van-tab>
        <van-tab title="拒绝退款" name="9"></van-tab>
        <van-tab title="已退款" name="5"></van-tab>
      </van-tabs>
    </div>
    
    <div class="coment">
      <div class="com_box" v-if="dataList.length>0">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getList"
        >
          <div class="info_box" v-for="(item,index) in dataList" :key="index">
            <div class="top_info">
              <span>订单号：{{item.orderNumber}}</span>
              <span class="time">{{dayjsFunc(item.orderTime)}}</span>
            </div>
            <div class="shopping_box">
              <img :src="imgPath+item.goodsCoverImg" alt="">
              <div class="rg_box">
                <h3>{{item.goodsName}}</h3>
                <span class="alone_pic">￥{{item.unitPrice}}/份</span>
                <div class="pic_box">
                  <span>X{{item.orderQuantity}}</span>
                  <div class="all_pic">
                    <span class="text">合计:</span>
                    <span class="pic_color">￥{{item.orderDiscountTotalPrice}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="btm_info">
              <div class="lf_box">
                <span v-if="item.orderStatus==6" class="payType payType0">审核中</span>
                <span v-else-if="item.orderStatus==9" class="payType payType1">拒绝退款</span>
                <span v-else-if="item.orderStatus==5" class="payType payType2">已退款</span>
              </div>
              <!-- <div class="rg_hj">
                <span>电子合同收货</span>
                <span>纸质合同收货</span>
              </div> -->
            </div>
          </div>
        </van-list>
      </div>
      <div class="noWallet" v-if="!loading&&dataList.length==0">
        <img src="@/assets/img/user/img_wudan@2x.png" alt="">
        <p>您还没订单呢</p>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import config from "@/config/env";
export default {
  data() {
    return {
      activeName:'6',
      dataList:[],
      dataDetail:{},
      imgPath:'',
      loading: false,
      finished: false,
      page:1,
      pageSize:5
    };
  },
  beforeRouteLeave(to,from,next){
    if(to.name=='myOrder') {
      to.meta.keepAlive=false
    }
    next()
  },
  created() {
    this.imgPath = config.ossUrl;
    this.getList()
  },
  methods: {
    dayjsFunc(time) {
        time = new Date(time.replace(/-/g, '/')).getTime()
        let times = String(time).length == 10 ? time * 1000 : time;
        let format = 'YYYY-MM-DD HH:mm:ss'
        return dayjs(Number(times)).format(format);
    },
    onClickLeft() {
      this.$router.push({name:'myOrder'})
    },
    async getList(val) {
      this.loading = true
      if(val) {
        this.page=1
        this.dataList=[]
      }
      let res = await this.$http.userOrderDetail({orderStatus:this.activeName||undefined,page:this.page,pageSize:this.pageSize})
      if (res) {
        setTimeout(()=>{
          this.page++
          this.dataList=this.dataList.concat(res.data.list)
          this.loading = false;
          if (this.dataList.length >= res.data.totalSize) {
            this.finished = true;
          } else {
            this.finished = false;
          }
        })
      }else{
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
.com_box{
  padding: 0 .29rem;
  margin-bottom: 0.5rem;
}
.fixedBox{
  position: fixed;
  width: 100%;
  z-index: 1;
  box-shadow: 0px 0px 30px 0px rgba(210,215,229,0.5);
}
.myOrder{
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
.coment{
  height: calc(100vh - 119px);
  overflow-y:auto;
}
.info_box{
  margin-top: .2rem;
  height: 3.7rem;
  background: #FFFFFF;
  border-radius: .08rem;
}
.top_info,.btm_info{
  height: .66rem;
  line-height: .66rem;
  font-size: .24rem;
  padding: 0 .24rem;
  border-bottom: 1px solid #F5F3F3;
}
.btm_info{
  height: .82rem;
  line-height: .82rem;
  width: 100%;
  border: none;
  border-top: 1px solid #F5F3F3;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
}
.time{
  float: right;
  color: #999999;
}
.shopping_box{
  width: 100%;
  padding: .18rem .24rem;
  height: 2.19rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
}
.shopping_box>img{
  width: 1.8rem;
  height: 1.8rem;
  border-radius: .08rem;
}
.rg_box{
  width: 4.5rem;
  padding: .12rem 0;
}
.rg_box > h3 {
  font-size: .32rem;
  margin-bottom: .1rem;
}
.rg_box .alone_pic{
  font-size: .26rem;
}
.rg_box .pic_box{
  margin-top: .36rem;
}
.rg_box .pic_box .all_pic{
  float: right;
  font-size: .26rem;
  font-weight: 600;
}
.rg_box .pic_box .all_pic .pic_color{
  color: #F30F0F;
}
.btm_info .lf_box{

}
.payType0{
  color: #F6741F;
}
.payType1{
  color: #8A94A8;
}
.payType2{
  color: #333;
}
.payType::before{
  display: inline-block;
  content: '';
  width: .1rem;
  height: .1rem;
  border-radius: 50%;
  background: #F6741F;
  margin-right: .1rem;
  vertical-align: middle;
}
.payType1::before{
  background: #8A94A8;
}
.payType2::before{
  background: #333;
}
.rg_hj{
  width: 5rem;
  text-align: right;
  padding-top: .02rem;
}
.rg_hj > span{
  display: inline-block;
  box-sizing: border-box;
  padding: .1rem .18rem;
  border-radius: .22rem;
  border: .02rem solid #00BDDA;
  color: #00BDDA;
  height: .44rem;
  line-height: .24rem;
  margin-right: .12rem;
}
.rg_hj > span:last-child{
  margin-right: 0;
}
.rg_hj > span.repal{
  border: .02rem solid #8A94A8;
  color: #8A94A8;
}
.rg_hj > span.pay{
  border: .02rem solid #F30F0F;
  color: #F30F0F;
}
.noWallet{
  text-align: center;
  font-size: 0.32rem;
  color: #999;
}
.noWallet img{
  width: 100%;
  margin-top: 1.3rem;
}
</style>